<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link href="../phoneCss/commons.css" rel="stylesheet"/>
    <link href="../css/swiper.min.css" rel="stylesheet"/>
    <link href="../phoneCss/goods.css?=1" rel="stylesheet"/>
    <style>
        .swiper-container-horizontal > .swiper-pagination-h {
            position: relative;
            /*border-bottom: 10px solid #f1f2f5;*/
            /*padding-bottom: 6px;*/
        }
        .mui-content{
            padding-bottom: 0;
        }
        #detailBox{
            margin-top: 0;
            padding-bottom: 50px;
        }
    </style>
</head>


<header class="mui-bar mui-bar-nav" id="top2">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <ul class="top_title">
        <a href="#goodsBox1"><li class="act" id="goods" href="goodsBox1">商品<span></span></li></a>
        <a href="#detailBox"><li class="" id="detail" href="detailBox">详情<span style="display: none;"></span></li></a>
        <a href="#commentBox"><li class="" id="comment" href="commentBox">评价<span style="display: none;"></span></li></a>
    </ul>
    <a href="#topPopover" style="float: right"><img class="more_w" src="../phoneImg/more_h.png" alt="分享" id="share"></a>
    <a style="float: right" id="share2"><img class="share_w" src="../phoneImg/share_h.png" alt="更多"></a>
</header>

<!--<div  class="mui-content mui-scroll-wrapper">-->
<div id="refreshContainer" class="mui-scroll-wrapper mui-scroll-wrapper2">
    <div class="mui-scroll" id="mui-scroll">
<div id="goodsBox1" name="goodsBox1">
    <div class="swiper-container4" id="div1">
        <div class="swiper-wrapper" id="banner">
            <!-- Slides -->
            <!--<div class="swiper-slide">-->
                <!--<a href="#">-->
                    <!--<img src="../phoneImg/goods.jpg">-->
                <!--</a>-->
            <!--</div>-->
            <!--<div class="swiper-slide">-->
                <!--<a href="#">-->
                    <!--<img src="../phoneImg/goods.jpg">-->
                <!--</a>-->
            <!--</div>-->
            <!--<div class="swiper-slide">-->
                <!--<a href="">-->
                    <!--<img src="../phoneImg/goods.jpg">-->
                <!--</a>-->
            <!--</div>-->
            <!--<div class="swiper-slide">-->
                <!--<a href="#">-->
                    <!--<img src="../phoneImg/goods.jpg">-->
                <!--</a>-->
            <!--</div>-->
            <!--<div class="swiper-slide">-->
                <!--<a href="#">-->
                    <!--<img src="../phoneImg/goods.jpg">-->
                <!--</a>-->
            <!--</div>-->
            <!--<div class="swiper-slide">-->
                <!--<a href="#">-->
                    <!--<img src="../phoneImg/goods.jpg">-->
                <!--</a>-->
            <!--</div>-->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination4" id="pagination4"></div>
    </div>
    <!--轮播图结束-->

    <div class="mui-content" id="goodsBox" style="">

        <!--
                作者：lwy
                时间：2017-02-09
                描述：商品内容区开始
           -->
        <div class="goods-title-box" id="goodsName"></div>
        <div class="goods-tips" id="goodsExplain"></div>
        <div class="price_box"><span class="price" id="memberPrice"></span><span class="trend" id="trend">价格走势</span>
        </div>
        <div class="stages_box" id="stages" style="display: none;">
            <span class="stage_title">叮当分期</span><span class="stage_pay">分期支付</span>
            <span class="stage_low">低至</span><span class="stage_periods"></span>
            <span class="stage_detail"></span>
        </div>
        <div class="choose_box" id="choose_box">
            <span class="choose" id="choose">请选择</span>
            <span class="choose_detail" id="choose_detail"></span><span class="choose_more"></span>
        </div>
        <!--<div class="send_box mui-clearfix" id="send_box">-->
            <!--<div class="send">送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至</div>-->
            <!--<div class="send_middle">-->
                <!--<span class="send_address"><img src="../phoneImg/send_address_icon.png"-->
                                                <!--alt="收货地址">河南 郑州市 金水区 东风路政七街</span>-->
                <!--<span class="send_time"><small class="now_goods">现货，</small><small-->
                        <!--class="time">23:00前下单，预计明天(10月14日送达)</small></span>-->
            <!--</div>-->
            <!--<div class="send_more"></div>-->
        <!--</div>-->
        <div class="potence_box mui-clearfix" id="goodsService" style="display: none">
            <!--<div class="potence"><img src="../phoneImg/petence_pigeon.png" alt=""><span>叮当网发货&售后</span></div>-->
        </div>
        <!--评价-->
        <div class="comment_box mui-clearfix">
            <h2 class="comment_title" id="comment_title">
                <span id="commentsCount">评价()</span>
                <span class="more_comment">查看更多<img src="../phoneImg/me_more_icon.png"/></span>
            </h2>
            <!---->
            <!--<div class="comment">-->
            <!--<div class="comment-user mui-clearfix">-->
            <!--<div class="user-img"><img src="../img/comment_h.jpg" alt="头像"></div>-->
            <!--<div class="user-info">-->
            <!--<span class="user-name">叮当猫</span>-->
            <!--</div>-->
            <!--<div class="user-star">-->
            <!--<span class="add-star2"></span>-->
            <!--<span class="del-star2"></span>-->
            <!--&lt;!&ndash;<img src="../img/four-star.jpg" alt="评分">&ndash;&gt;-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="comment-detail">-->
            <!--特别好非常好点击撒娇打卡机的房价快速了解到卡里的卡开始来了的境况撒就是空的考拉就上课了打开-->
            <!--</div>-->
            <!--<div class="comment-img-box mui-clearfix">-->
            <!--<div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src="" data-preview-group="3">-->
            <!--</div>-->
            <!--<div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src="" data-preview-group="3">-->
            <!--</div>-->
            <!--<div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src="" data-preview-group="3">-->
            <!--</div>-->
            <!--<div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src=""-->
            <!--data-preview-group="3"><span-->
            <!--class="comment-img-number">共5张</span></div>-->
            <!--</div>-->
            <!--<div class="comment_spe">金色；64GB</div>-->
            <!--</div>-->
            <!---->
        </div>

        <!--猜你喜欢-->
        <div class="guess_box">
            <h3 class="guess_title">猜你喜欢</h3>
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group">
                    <!-- 第一张 -->
                    <div class="mui-slider-item" id="guess1">
                        <!--<a href="#" style="width: 33.3%;float: left">-->
                            <!--<div class="guess_goods">-->
                                <!--<img src="../phoneImg/goods2.jpg" alt="">-->
                                <!--<p class="guess_goods_title">Apple 苹果iphone8全网金色</p>-->
                                <!--<p class="guess_price">￥2998.00</p>-->
                            <!--</div>-->
                        <!--</a>-->
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item" style="display: none" id="guess2">
                        <!--<a href="#" style="width: 33.3%;float: left">-->
                            <!--<div class="guess_goods">-->
                                <!--<img src="../phoneImg/goods2.jpg" alt="">-->
                                <!--<p class="guess_goods_title">Apple 苹果iphone8全网金色</p>-->
                                <!--<p class="guess_price">￥2998.00</p>-->
                            <!--</div>-->
                        <!--</a>-->
                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active" id="guess_slide1"></div>
                    <div class="mui-indicator" id="guess_slide2"></div>
                </div>
            </div>
            <!-- Swiper -->
            <!--<div class="swiper-container swiper-container-h">-->
                <!--<div class="swiper-wrapper" id="guessBox">-->
                    <!--&lt;!&ndash;<div class="swiper-slide">&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="guess_goods">&ndash;&gt;-->
                            <!--&lt;!&ndash;<img src="../phoneImg/goods2.jpg" alt="">&ndash;&gt;-->
                            <!--&lt;!&ndash;<p class="guess_goods_title">Apple 苹果iphone8全网金色</p>&ndash;&gt;-->
                            <!--&lt;!&ndash;<p class="guess_price">￥2998.00</p>&ndash;&gt;-->
                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--</div>-->
                <!--&lt;!&ndash; Add Pagination &ndash;&gt;-->
                <!--<div class="swiper-pagination swiper-pagination-h"></div>-->
            <!--</div>-->
        </div>
        <div class="pull_title">
            <!--<img src="../phoneImg/pull_icon.png" alt="">-->
            <span class="line"></span><span class="text">图文详情</span><span class="line"></span>
        </div>
    </div>
</div>


<!--图文详情-->
<div id="detailBox" name="detailBox">
    <ul class="parameter">
        <li class="par-active" showDiv="detailBox1"><span>图文详情</span></li>
        <li showDiv="detailBox2"><span>详细参数</span></li>
        <li showDiv="detailBox3"><span>售后保障</span></li>
    </ul>
    <div id="detailDetail">
        <div class="detail_box" id="detailBox1">
            <!--<img src="../phoneImg/goods.jpg" alt="">-->
            <!--<img src="../phoneImg/goods.jpg" alt="">-->
            <!--<img src="../phoneImg/goods.jpg" alt="">-->
        </div>
        <div class="detail_box" id="detailBox2" style="display: none"></div>
        <div class="detail_box" id="detailBox3" style="display: none"></div>
    </div>
</div>

<!--</div>-->
<!--商品盒子结束，评价盒子开始-->
<div id="commentBox" name="commentBox" style="display: none">
    <div class="swiper-container" id="topNav">
        <div class="swiper-wrapper" id="allComment_title_box">
            <!--<div class="swiper-slide active" stateValue=""><span>全部评价<b>2401</b></span></div>-->
        </div>
    </div>
    <!--评价-->
    <div class="comment_box mui-clearfix">
        <h2 class="comment_title">
            <span id="commentNum">评价(0)</span>
            <!--<span class="more_comment">查看更多<img src="../phoneImg/me_more_icon.png"/></span>-->
        </h2>
        <div id="comment-box">
            <!---->
            <div class="comment">
                <div class="comment-user mui-clearfix">
                    <div class="user-img"><img src="../img/comment_h.jpg" alt="头像"></div>
                    <div class="user-info">
                        <span class="user-name">叮当猫</span>
                    </div>
                    <div class="user-star">
                        <span class="add-star2"></span>
                        <span class="del-star2"></span>
                    </div>
                </div>
                <div class="comment-detail">

                </div>
                <div class="comment-img-box mui-clearfix">
                    <div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src=""
                              data-preview-group="3">
                    </div>
                    <div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src=""
                              data-preview-group="3">
                    </div>
                    <div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src=""
                              data-preview-group="3"><span
                            class="comment-img-number">共5张</span></div>
                </div>
                <div class="comment_spe">金色；64GB</div>
            </div>
            <!---->
            <div class="comment">
                <div class="comment-user mui-clearfix">
                    <div class="user-img"><img src="../img/comment_h.jpg" alt="头像"></div>
                    <div class="user-info">
                        <span class="user-name">叮当猫</span>
                    </div>
                    <div class="user-star">
                        <span class="add-star2"></span>
                        <span class="del-star2"></span>
                    </div>
                </div>
                <div class="comment-detail">
                    特别好非常好点击撒娇打卡机的房价快速了解到卡里的卡开始来了的境况撒就是空的考拉就上课了打开
                </div>
                <div class="comment-img-box mui-clearfix">
                    <div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src=""
                              data-preview-group="3">
                    </div>
                    <div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src=""
                              data-preview-group="3">
                    </div>
                    <div><img src="../phoneImg/gray_placeholder.png" alt="img" data-preview-src=""
                              data-preview-group="3"><span
                            class="comment-img-number">共5张</span></div>
                </div>
                <div class="comment_spe">金色；64GB</div>
            </div>
        </div>

    </div>
</div>

</div>
</div>

<!--浮动按钮-->
<div class="float-box">
    <div class="link-qq" id="BizQQWPA">
        <span><img src="../phoneImg/link-qq.png" alt=""></span>
        <span>在线客服</span>
    </div>
    <div class="collection" id="collection">
        <span><img id="collection_img" src="../phoneImg/collection.png" alt=""></span>
        <span id="collText">收藏</span>
    </div>
    <div class="cart" id="cart">
        <span><img src="../phoneImg/cart.png" alt=""></span>
        <span>购物车</span>
    </div>
    <div class="buy">立即购买</div>
    <div class="add-cart">加入购物车</div>
</div>

<!--分期盒子-->
<div class="stage_float_box" style="position: fixed;">
    <div class="stage_bottom_box">
        <div class="stage_box1">
            <div class="close_stage" id="close_stage"></div>
            <ul class="stage_title_box mui-clearfix">
                <!--<li class="stage_act"><span>大学生</span></li>-->
                <li style="width: 100%"><span>捷信分期</span></li>
                <!--<li><span>花呗分期</span></li>-->
            </ul>
        </div>
        <ul class="stage_detail_box">
            <!--<li class="mui-clearfix">-->
                <!--<div class="state_detail_img"><img src="../phoneImg/no_pigeon.jpg" alt=""></div>-->
                <!--<div class="state_fr">-->
                    <!--<span>￥845.50x3 期</span>-->
                    <!--<span>含服务费：每期 12.50，费率0.50%</span>-->
                <!--</div>-->
            <!--</li>-->
        </ul>
    </div>
    <div class="stages_transaction" id="stages_transaction">到店分期办理</div>
</div>

<!--地址盒子-->
<div class="goods_address_box" id="goods_address_box">
    <div class="address_bottom_box">
        <div class="colse_address" id="colse_address">
            <div class="colse_address_box">
                <div class="black_dot"></div>
                <div class="white_line"></div>
                <div class="colse_img"></div>
            </div>
        </div>
        <div class="address_box1">
            <div class="address_title">选择城市</div>
            <ul class="address_title_box mui-clearfix">
                <li class="address_act"><span>河南</span></li>
                <li><span>郑州</span></li>
                <li><span>金水区</span></li>
            </ul>
        </div>
        <ul class="address_detail_box">
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
            <li class="address_detail_act">北京</li>
            <li>上海</li>
            <li>深圳</li>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>
    </div>
</div>

<!--价格走势-->
<div class="price_trend_box" style="width: 100%;height: 100%;top: 0;display: block;position: fixed;" id="price_trend_box">
    <div class="price_bottom_box">
        <div class="close_price" id="close_price"></div>
        <div class="price_trend_title">价格走势</div>
        <div id="main" style="width: 95%;height:83%;margin: 0 auto">

        </div>
    </div>
</div>

<!--规格选择盒子-->
<div class="specification_box" style="position: fixed;" >
    <div class="black_box"></div>
    <div class="specification_bottom_box">
        <div class="colse_spe" id="colse_spe"></div>
        <div class="top_box mui-clearfix">
            <div class="specification_img">
                <img src="../phoneImg/goods.jpg" alt="" id="spe_img">
            </div>
            <div class="specification_info_box mui-clearfix">
                <div class="price">¥ 5880</div>
                <div class="code" id="code">商品编号：G1322820</div>
            </div>
        </div>
        <div class="mui-scroll-wrapper" id="mui-scroll-wrapper" style="top: 98px;">
            <div class="mui-scroll">
                <div class="detail_box" id="detail_box">
                    <!--<div class="detail_small_box">-->
                    <!--<div class="detail_title">颜色</div>-->
                    <!--<div class="detail_spe mui-clearfix">-->
                    <!--<div class="spe-one spe_act">黑色</div><div class="spe-one">黑色</div>-->
                    <!--<div class="spe-one">黑色</div><div class="spe-one">黑色</div>-->
                    <!--<div class="spe-one">黑色</div><div class="spe-one">黑色</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="detail_small_box">-->
                    <!--<div class="detail_title">颜色</div>-->
                    <!--<div class="detail_spe mui-clearfix">-->
                    <!--<div class="spe-one">黑色</div><div class="spe-one">黑色</div>-->
                    <!--<div class="spe-one">黑色</div><div class="spe-one">黑色</div>-->
                    <!--<div class="spe-one">黑色</div><div class="spe-one">黑色</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="detail_count_title">-->
                    <!--<span>数量</span>-->
                    <!--<span class="choose_count"><span-->
                    <!--class="decreace"></span><input type="text" class="count" value="1"><span-->
                    <!--class="add"></span></span>-->
                    <!--</div>-->
                    <div class="appreciation_box" id="appreciation_box">
                        <div class="appreciation_title" style="display: none;">叮当网服务</div>
                        <ul class="appreciation_detail">
                            <!--<li><span class="appreciation">进水保1年 ￥499</span><span class="appreciation_more">查看详情</span></li>-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="spe_certain">确定</div>
    </div>
</div>

<!--服务说明盒子-->
<div class="service_explain_box" style="position: fixed;">
    <div class="service_bottom_box">
        <div class="service_box1">
            <div class="close_service" id="close_service"></div>
            <div class="service_title">服务说明</div>
        </div>
        <ul class="service_detail_box" id="service_detail_box">
            <!--<li>-->
                <!--<div class="mui-clearfix">-->
                    <!--<div class="service_detail_img"><img src="../phoneImg/service5.png" alt=""></div>-->
                    <!--<div class="service_fr">-->
                        <!--<span>以旧换新</span>-->
                        <!--<span>支持旧手机抵用现金换新手机的方式</span>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</li>-->
        </ul>
    </div>
</div>

<!--右上角弹出菜单-->
<div id="topPopover" class="mui-popover">
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="index.html"><img src="../img/more_index.png" alt="首页">首页</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="search.html"><img src="../img/more_search.png" alt="搜索">搜索</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="order.html"><img src="../img/more_order.png" alt="我的订单">我的订单</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="QR-code" style="display: none">
    <div class="close" id="close"><img src="../phoneImg/close-code.png" alt="关闭"></div>
    <div class="QR-Box">
        <p id="wxNum"></p>
        <img id="QR-code" src="" alt="二维码">
        <p>扫一扫上面的二维码加微信咨询</p>
    </div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script>
    mui.previewImage();
</script>
<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/swiper-3.4.2.jquery.min.js"></script>
<script src="../phoneJs/echarts/echarts.simple.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="../js/sha1.js"></script>
<script src="../phoneJs/ifApp.js"></script>
<script>
    document.write("<s" + "cript type='text/javascript' src='../js/common.js?" + Math.random() + "'></scr" + "ipt>");
    document.write("<s" + "cript type='text/javascript' src='../phoneJs/goods.js?" + Math.random() + "'></scr" + "ipt>");
    var slider = mui("#slider");
    slider.slider({
        interval: 0
    });
</script>
</body>

</html>